<template>
  <view class="mySelect">
    <view class="mySelect_show">
      <view @tap="handleTap()" class="mySelect_l">{{lineSlect}}</view>
      <view @tap="handleTap()" class="mySelect_r iconfont">&#xe60c;</view>
    </view>
    <lbPicke ref="picker"
             v-model="value"
             :mode="mode"
             :list="inList"
             :searchShow="searchShow"
             :level="level"
             @change="handleChange"
             @confirm="handleConfirm"
             @cancel="handleCancel">
    </lbPicke>
  </view>
</template>
<script>
// 地区选择
// <areaSelect />
// import areaSelect from '../../components/formList/areaSelect'
import lbPicke from './lb-picker/index'
import {backType, cycle, isArray} from './util'
export default {
  components: {
    lbPicke
  },
  data() {
    return {
      name: '',
      lineSlect:'请选择',
      value: [],
      inList:[],
      cacheValue:'',// 被缓存的数据
      // 结果，list到值顺序
      valueListF:''
    }
  },
  props:{
    // val先赋值list后赋值的时候，是否缓存val数据，是否缓存第一次赋值
    isCache:{
      default:()=>{
        return true
      }
    },
    // 取值的键值
    getKey:{
      default:()=>{
        return 'label'
      }
    },
    // 禁用
    disabled:{
      default:()=>{
        return false
      }
    },
    // 是否刷新
    resh:{
      default:()=>{
        return true
      }
    },
    isObj:{
      default:()=>{
        return false
      }
    },
    join:{
      default:()=>{
        return ','
      }
    },
    // 是否显示搜框
    searchShow:{
      default:()=>{
        return false
      }
    },
    placeholder:{
      default:()=>{
        return '请选择'
      }
    },
    list:{
      default:()=>{
        return ['1','n']
      }
    },
    level:{
      default:()=>{
        return 1
      }
    },
    code:{
      default:()=>{
        return ''
      }
    },
    val:{
      default:()=>{
        return ''
      }
    }
  },
  onLaunch(){
  },
  created() {
    this.setList()
  },
  mounted(){

  },
  onLoad() {
  },

  methods: {
    setList(){
      this.lineSlect=this.placeholder
      this.inList=this.list.map((val,index)=>{
        let obj={}
        if (backType(val,'String')) {
          obj= {
            value:index+''||'',
            label:val
          }
        }else{
          obj= {
            ...val,
            value:val.value+''||index+'',
            label:val.label||index,
          }
        }
        return obj
      })
      this.strToVal(this.val)
    },
    strToVal(areaStr){
      if (areaStr) {
        areaStr+=''
        this.lineSlect=areaStr
        let arr=areaStr.split(this.inJoin||',')
        let mindArr=this.inList
        let areaArr= cycle(arr,mindArr,this.getKey)
        let idStr=areaArr.map(v=>v.value).join(this.inJoin||',')
        this.value= areaArr.map(v=>v.value)
        this.lineSlect= areaArr.map(v=>v.label).join(this.inJoin||',')
        if (areaArr.length>0) {
          this.$emit('selectValue',{value: idStr,label:this.lineSlect,labelStr:this.lineSlect,code:this.code,idStr})
        }
        return areaArr
      }else{
        this.value= []
        this.lineSlect=this.placeholder||'请选择'
        return []
      }
    },
    handleTap () {
      if (!this.disabled) {
        this.$refs['picker'].show()
      }
    },
    handleChange (item) {
    },
    // 确认事件
    handleConfirm (item) {
      if (!item) return
      this.lineSlect=''
      let idStr=''
      let labelStr=''
      if (isArray(item.item)) {
        this.lineSlect=item.item.map(val=>val.label).join(this.inJoin)
        labelStr=item.item.map(val=>val.label).join(this.inJoin)
        idStr=item.item.map(val=>val.value).join(this.inJoin)
      }else{
        this.lineSlect=item.item.label
        labelStr=item.item.label
        idStr=item.item.value
      }
      let em={value:idStr,labelStr,code:this.code,idStr,label:labelStr}
      this.$emit('selectValue',em)
    },
    handleCancel (item) {
    },
  },
  watch:{
    val:{
      handler(val) {
        if (val&&val.length>0&&!this.valueListF) {
          this.valueListF='value'
          this.cacheValue=val
        }
        this.strToVal(val)
      },
      immediate: true,
      deep: true
    } ,
    list:{
      handler(val,old) {
        if (val!=old) {
          this.setList()
          if (this.valueListF==='value'&&this.isCache) {
            this.strToVal(this.cacheValue)
          }
        }
        if (val&&val.length>0&&!this.valueListF) {
          this.valueListF='list'
        }
      },
      immediate: true,
      deep: true
    }
  },
  computed:{
    mode(){
      let back='selector'
      if (this.level>1) {
        back='multiSelector'
      }
      return back
    },
    inJoin(){
      return this.join||','
    },
  }

}
</script>
<style lang="scss" scoped>
@import "scss/iconfont.css";
.mySelect{
  position: relative;
  width: 100%;
  .mySelect_show{
    display: flex;
    justify-content: space-between;
    align-content: center;
  }
  .mySelect_l{
    flex-shrink: 1;
    width: 100%;
  }
  .mySelect_r{
    flex-shrink: 0;
    font-size: 28rpx;
    line-height: 40rpx;
  }
}

</style>

